<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录成功</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // 保持与其他页面一致的Tailwind配置，确保视觉统一性
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A', // 新增成功色，用于登录成功提示
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                        gray: {
                            100: '#F7F8FA',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.6s ease-out forwards',
                        'bounce-light': 'bounceLight 1.5s ease-in-out infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0', transform: 'translateY(15px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        },
                        bounceLight: {
                            '0%, 100%': { boxShadow: '0 0 0 0 rgba(82, 196, 26, 0.3)' },
                            '50%': { boxShadow: '0 0 0 12px rgba(82, 196, 26, 0)' },
                        }
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90 focus:ring-2 focus:ring-primary/30;
            }
            .btn-outline {
                @apply border border-gray-300 text-dark hover:border-primary hover:text-primary focus:ring-2 focus:ring-primary/20;
            }
            .card-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral min-h-screen flex flex-col">
    <!-- 导航栏：登录后状态，显示用户信息（区别于未登录时的“登录/注册”按钮） -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- 网站Logo：点击返回首页 -->
                <div class="flex items-center">
                    <a href="index.html" class="flex items-center space-x-2">
                        <span class="text-primary text-2xl"><i class="fa fa-connectdevelop"></i></span>
                        <span class="font-bold text-xl text-dark">石神的网页</span>
                    </a>
                </div>

                <!-- 登录后用户信息：头像 + 用户名下拉菜单 -->
                <div class="flex items-center relative group">
                    <!-- 头像与用户名 -->
                    <button class="flex items-center space-x-3 px-2 py-1 rounded-full hover:bg-gray-100 transition-colors">
                        <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-primary">
                            <i class="fa fa-user"></i>
                        </div>
                        <span class="text-gray-600 font-medium hidden sm:inline-block">石神</span>
                        <i class="fa fa-angle-down text-gray-400 text-xs"></i>
                    </button>

                    <!-- 下拉菜单（hover显示） -->
                    <div class="absolute top-full right-0 mt-2 w-48 bg-white rounded-lg shadow-md py-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-20">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-100">
                            <i class="fa fa-user-circle mr-2 text-gray-400"></i>个人中心
                        </a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-100">
                            <i class="fa fa-cog mr-2 text-gray-400"></i>账户设置
                        </a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-100">
                            <i class="fa fa-bell mr-2 text-gray-400"></i>消息通知
                        </a>
                        <div class="border-t border-gray-100 my-1"></div>
                        <button id="logoutBtn" class="block w-full text-left px-4 py-2 text-sm text-danger hover:bg-gray-100">
                            <i class="fa fa-sign-out mr-2"></i>退出登录
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区：核心信息（登录成功提示）+ 后续操作入口 -->
    <main class="flex-grow py-10 px-4 sm:px-6 lg:px-8">
        <div class="container mx-auto max-w-5xl">
            <!-- 1. 登录成功提示区：突出“成功”状态，传递安全感 -->
            <div class="bg-white rounded-2xl shadow-sm p-6 sm:p-8 mb-10 animate-fade-in">
                <div class="flex flex-col sm:flex-row items-center justify-between gap-6 sm:gap-0">
                    <!-- 左侧：图标 + 文字提示 -->
                    <div class="flex items-center">
                        <!-- 成功图标（带呼吸灯动画） -->
                        <div class="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center text-success mr-6 animate-bounce-light">
                            <i class="fa fa-check text-3xl"></i>
                        </div>
                        <!-- 文字信息：欢迎语 + 登录状态 -->
                        <div>
                            <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-1">欢迎回来，张小明！</h1>
                            <p class="text-gray-500">
                                您已成功登录，本次登录时间：<span class="text-gray-600 font-medium">2024-05-20 14:30</span>
                                <br class="sm:hidden">
                                登录设备：<span class="text-gray-600 font-medium">Chrome / Windows 10</span>
                            </p>
                        </div>
                    </div>
                    <!-- 右侧：核心操作按钮（进入控制台/返回首页） -->
                    <div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
                        <a href="dashboard.html" class="btn-primary px-6 py-3 rounded-lg font-medium flex items-center justify-center">
                            <i class="fa fa-tachometer mr-2"></i>进入控制台
                        </a>
                        <a href="index.html" class="btn-outline px-6 py-3 rounded-lg font-medium flex items-center justify-center">
                            <i class="fa fa-home mr-2"></i>返回首页
                        </a>
                    </div>
                </div>
            </div>

            <!-- 2. 快捷功能区：登录后常用功能入口，提升效率 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 animate-fade-in" style="animation-delay: 0.2s">
                <!-- 功能1：消息中心 -->
                <a href="#" class="bg-white rounded-xl shadow-sm p-6 card-hover">
                    <div class="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-envelope-o text-xl"></i>
                    </div>
                    <h3 class="font-medium text-dark text-lg mb-2">消息中心</h3>
                    <p class="text-gray-500 text-sm mb-3">查看最新通知与消息</p>
                    <!-- 未读提示 -->
                    <div class="flex items-center">
                        <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-danger text-white text-xs">3</span>
                        <span class="ml-2 text-sm text-gray-500">条未读消息</span>
                    </div>
                </a>

                <!-- 功能2：个人设置 -->
                <a href="#" class="bg-white rounded-xl shadow-sm p-6 card-hover">
                    <div class="w-12 h-12 bg-secondary/10 text-secondary rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-cog text-xl"></i>
                    </div>
                    <h3 class="font-medium text-dark text-lg mb-2">个人设置</h3>
                    <p class="text-gray-500 text-sm mb-3">修改资料、密码与偏好</p>
                    <!-- 提示标签 -->
                    <div class="inline-block px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">
                        最近更新：3天前
                    </div>
                </a>

                <!-- 功能3：我的收藏 -->
                <a href="#" class="bg-white rounded-xl shadow-sm p-6 card-hover">
                    <div class="w-12 h-12 bg-primary/10 text-primary rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-star-o text-xl"></i>
                    </div>
                    <h3 class="font-medium text-dark text-lg mb-2">我的收藏</h3>
                    <p class="text-gray-500 text-sm mb-3">查看您收藏的内容</p>
                    <!-- 数量提示 -->
                    <span class="text-sm text-gray-500">共 12 条收藏</span>
                </a>

                <!-- 功能4：帮助中心 -->
                <a href="#" class="bg-white rounded-xl shadow-sm p-6 card-hover">
                    <div class="w-12 h-12 bg-secondary/10 text-secondary rounded-lg flex items-center justify-center mb-4">
                        <i class="fa fa-question-circle-o text-xl"></i>
                    </div>
                    <h3 class="font-medium text-dark text-lg mb-2">帮助中心</h3>
                    <p class="text-gray-500 text-sm mb-3">获取使用帮助与支持</p>
                    <!-- 快捷入口 -->
                    <span class="text-sm text-primary hover:underline">联系客服 →</span>
                </a>
            </div>

            <!-- 3. 最近动态区：展示用户近期操作，增强页面实用性 -->
            <div class="mt-10 bg-white rounded-2xl shadow-sm p-6 sm:p-8 animate-fade-in" style="animation-delay: 0.4s">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold text-dark">最近操作</h2>
                    <a href="#" class="text-primary text-sm hover:underline flex items-center">
                        查看全部 <i class="fa fa-angle-right ml-1"></i>
                    </a>
                </div>
                <!-- 操作列表 -->
                <div class="space-y-4">
                    <div class="flex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
                        <div class="w-8 h-8 bg-primary/10 text-primary rounded-full flex items-center justify-center mt-0.5 flex-shrink-0">
                            <i class="fa fa-edit text-sm"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-gray-600">修改了个人资料</p>
                            <p class="text-gray-400 text-xs mt-1">2024-05-17 09:45</p>
                        </div>
                    </div>
                    <div class="flex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
                        <div class="w-8 h-8 bg-success/10 text-success rounded-full flex items-center justify-center mt-0.5 flex-shrink-0">
                            <i class="fa fa-download text-sm"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-gray-600">下载了「月度报表.pdf」</p>
                            <p class="text-gray-400 text-xs mt-1">2024-05-15 16:20</p>
                        </div>
                    </div>
                    <div class="flex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
                        <div class="w-8 h-8 bg-secondary/10 text-secondary rounded-full flex items-center justify-center mt-0.5 flex-shrink-0">
                            <i class="fa fa-share text-sm"></i>
                        </div>
                        <div class="ml-4">
                            <p class="text-gray-600">分享了内容「产品使用指南」</p>
                            <p class="text-gray-400 text-xs mt-1">2024-05-12 11:30</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚：与其他页面保持一致，确保品牌统一性 -->
    <footer class="bg-white border-t border-gray-200 py-6 mt-12">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <!-- 版权信息 -->
                <div class="text-center md:text-left text-gray-500 text-sm mb-4 md:mb-0">
                    &copy; 2023 Connect. 保留所有权利。
                </div>
                <!-- 辅助链接 -->
                <div class="flex flex-wrap justify-center gap-x-6 gap-y-2">
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors text-sm">隐私政策</a>
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors text-sm">服务条款</a>
                    <a href="mailto:support@connect.com" class="text-gray-400 hover:text-primary transition-colors text-sm">联系我们</a>
                    <a href="#" class="text-gray-400 hover:text-primary transition-colors text-sm">帮助中心</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 交互脚本：退出登录功能 + 页面增强 -->
    <script>
        // 退出登录功能
        const logoutBtn = document.getElementById('logoutBtn');
        if (logoutBtn) {
            logoutBtn.addEventListener('click', function() {
                if (confirm('确定要退出登录吗？')) {
                    // 实际项目中：1. 清除登录状态（Cookie/Session/Token）；2. 跳转登录页
                    alert('已退出登录，即将返回登录页');
                    window.location.href = 'login.html';
                }
            });
        }

        // 为所有链接添加统一的过渡效果
        document.addEventListener('DOMContentLoaded', function() {
            const links = document.querySelectorAll('a:not([target="_blank"])');
            links.forEach(link => {
                link.classList.add('transition-colors', 'duration-200');
            });
        });
    </script>
</body>
</html>